<template>
  <div class="fillcontain">
    <head-top></head-top>
    <div class="table_container">
      <el-button
        size="medium"
        @click="handleAdd">添加</el-button>
      <!--列表-->
      <el-table :data="DList" highlight-current-row v-loading="loading" style="width: 100%;">
        <el-table-column type="index">
        </el-table-column>
        <el-table-column prop="serialNumber" label="序列号" sortable>
        </el-table-column>
        <el-table-column label="状态" sortable>
          <template slot-scope="scope">
            <span style="margin-left: 10px" v-if="!scope.row.status">未出库</span>
            <span style="margin-left: 10px" v-else>已出库'</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="设备名" sortable>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              @click="handleEdit(scope.row)">编辑</el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
        <!--<el-table-column prop="age" label="name数量" width="100" sortable>-->
        <!--</el-table-column>-->
      </el-table>

      <el-dialog title="添加设备" :visible.sync="dialogFormVisible">
        <el-form :model="selectTable">
          <el-form-item label="设备名称" label-width="100px">
            <el-select v-model="selectIndex" :placeholder="selectMenu.label" @change="handleSelect">
              <el-option
                v-for="item in menuOptions"
                :key="item.value"
                :label="item.label"
                :value="item.index">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备序列号" label-width="100px">
            <el-input v-model="selectTable.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="设备状态" label-width="100px">
            <el-input v-model="selectTable.description"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateFood">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import headTop from './head.vue'
//  import {baseUrl, baseImgPath} from '@/config/env'
  import {DeviceType, DeviceList} from '@/api/api'
  export default {
    data () {
      return {
        selectTable: {},
        dialogFormVisible: false,
        menuOptions: [],
        selectMenu: {},
        DList: [],
        selectIndex: null
      }
    },
    components: {
      headTop
    },
    created () {
      this.initData()
    },
    methods: {
      // 获取设备列表
      async initData () {
        this.loading = true
        this.selectTable.name = '' // 重置输入框内容
        try {
          DeviceList().then((res) => {
            this.DList = res.data
            this.loading = false
          })
        } catch (err) {
          console.log('获取数据失败', err)
        }
      },
      async getMenu () {
        this.menuOptions = []
        try {
          DeviceType().then((res) => {
            res.data.forEach((item, index) => {
              this.menuOptions.push({
                label: item.name,
                value: item.id,
                index
              })
            })
          })
        } catch (err) {
          console.log('获取设备名称失败', err)
        }
      },
      handleAdd () {
        this.getMenu()
        this.dialogFormVisible = true
      },
      handleSelect (index) {
        this.selectIndex = index
        this.selectMenu = this.menuOptions[index]
      },
      async updateFood () {
        this.dialogFormVisible = false
      }
    }
  }
</script>
